<template>
  <el-form
    ref="loginFormRef"
    :model="form"
    :rules="rules"
    class="login-form"
  >
    <div class="login-title-logo">
      <svg-icon class="title-logo" name="custom-login-title-logo"></svg-icon>
    </div>
    <!-- <h3>{{ $t('layout.logoTitle') }}</h3> -->
    <el-form-item prop="username">
      <el-input
        v-model.trim="form.username"
        clearable
        text
        :placeholder="$t('layout.accountNumber')"
      >
        <template #prefix>
          <svg-icon class="input-prefix" name="user"></svg-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model.trim="form.password"
        type="password"
        show-password
        :placeholder="$t('layout.password')"
      >
        <template #prefix>
          <svg-icon class="input-prefix" name="lock"></svg-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="code" class="code-c">
      <el-input
        v-model.trim="form.code"
        clearable
        :placeholder="$t('layout.verificationCode')"
        @keyup.enter="submit"
      >
        <template #prefix>
          <svg-icon class="input-prefix" name="code"></svg-icon>
        </template>
      </el-input>
      <div class="code-img">
        <el-image :src="codeImg" @click="getCode"></el-image>
      </div>
    </el-form-item>
    <el-form-item>
      <div class="options">
        <el-checkbox v-model="rememberMe" :label="$t('layout.rememberPassword')" />
        <el-link
          type="primary"
          :underline="false"
          href="javascript:void(0);"
          @click="forgetPassword"
        >
          {{ $t('layout.forgetPassword') }}？
        </el-link>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button
        class="submit-btn"
        type="primary"
        :loading="user.loginLoading"
        @click="submit"
      >
        {{ $t('layout.signIn') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { getCodeImg } from '@/api/user'
import userStore from '@/store/modules/user'
import { queryRedirect } from '@/utils'
import { clearViewStorage } from "@/utils/tagCaches"

const user = userStore()
const router = useRouter()
const { t } = useI18n()
const form = reactive({
    username: undefined,
    password: undefined,
    code: undefined,
    uuid: undefined,
  }), codeImg = ref(), loginFormRef = ref(null), rememberMe = ref(false), rules = {
    username: [{ required: true, message: t('nameFormat.cannotBeEmpty', [t('layout.verificationCode')]), trigger: 'blur' }],
    password: [{ required: true, message: t('nameFormat.cannotBeEmpty', [t('layout.password')]), trigger: 'blur' }],
    code: [{ required: true, message: t('nameFormat.cannotBeEmpty', [t('layout.verificationCode')]), trigger: 'blur' }],
  },
  getCode = () => {
    getCodeImg().then((res: { code: number; data: { img: string; uuid: string } }) => {
      if (res.code === 200) {
        codeImg.value = `data:image/gif;base64,${ res.data.img }`
        form.uuid = res.data.uuid
      }
    })
  }
const getCookie = () => {
  const username = localStorage.getItem('username')
  const password = localStorage.getItem('password')
  const localRememberMe = Boolean(localStorage.getItem('rememberMe')) 
  form.username = username
  form.password = password
  rememberMe.value = localRememberMe
}
getCookie()
const submit = () => {
  loginFormRef.value.validate(async (valid: boolean) => {
    if (valid && user.loginLoading === false) {
      user.setLoginLoading(true)
      try {
        if (rememberMe.value) {
          localStorage.setItem('username', form.username)
          localStorage.setItem('password', form.password)
          localStorage.setItem('rememberMe', String(rememberMe.value))
        } else {
          localStorage.setItem('username', '')
          localStorage.setItem('password', '')
          localStorage.setItem('rememberMe', '')
        }
        await user.login(form)
        //清除标签缓存
        clearViewStorage()
        router.replace({ name: 'selectCompany', query: { redirect: queryRedirect().value } })
      } catch (err) {
        console.log(err)
        form.code = ''
        getCode()
        user.setLoginLoading(false)
      }
    }
  })
}
const forgetPassword = () => {
  router.push({ name: 'resetPswd', query: { redirect: queryRedirect().value } })
}
getCode()
</script>
<style lang='less' scoped>
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .login-title-logo {
    width: 256px;
    margin-bottom: 32px;
    .title-logo {
      height: 33px;
      width: 182px;
    }
  }
  .input-prefix {
    width: 14px;
    height: 14px;
  }
  .el-input {
    width: 256px;
  }
  .code-c {
    .el-input {
      width: 166px;
    }
    .code-img {
      width: 80px;
      height: 30px;
      margin-left: 8.8px;
    }
  }
  .options {
    display: flex;
    width: 256px;
    justify-content: space-between;
  }
  .submit-btn {
    width: 256px;
  }
}
</style>